<template>
	
	<view class="pageItem">
		<view class="head">
			<view class="h_con">
				<view class="h_msg">
					<view class="txt1" @click="$r('/pages/diamond/diamond')" >{{$t('chase.my_diamond')}}</view>
					<view class="txt2">{{userInfo.score||'0.00'}}</view>
				</view>
				<image class="logo_img" src="/static/img/chase_logo.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="main">
			<view class="tip_item">
				<view class="tip" @click="$r('/pages/bean/beanMain')" >{{$t('chase.diamond_tip')}}</view>
				<view class="t_card">
					<view class="t_c_t" @click.stop="$r('/pages/chase/day_income')">
						<label class="num">{{score}}</label>{{$t('chase.today_tip')}}
					</view>
					<view class="remark" v-if="hasLogin"  @click.stop="$r('/pages/chase/my_server')">
					<!-- 	<block>
							<label class="r_txt" v-if="userInfo.vip_level == 2">VIP会员</label>
							<label class="r_txt" v-else>普通会员</label>
						</block> -->
						<block>
							<label class="r_txt" >{{bag_num}} {{$t('chase.data_package')}}</label>
						</block>
						<block>
							<label class="r_txt" >{{stat_num}} {{$t('chase.star_service')}}</label>
						</block>
					</view>
					<view class="remark" v-else>
						<block>
							<label class="r_txt">{{$t('system.tip4')}}</label>
						</block>
					</view>
				</view>
			</view>
			
			<view class="diamond_item" @click="$r('/pages/diamond/diamondLeaderboard')" >
				<view class="l_con">{{$t('diamond.diamond_leaderboard')}}</view>
				<image class="l_bg" src="/static/img/task_bg.png"></image>
			</view>
			
			<view class="movie_item">
				
				<view class="m_tit" @click="$r('/pages/chase/movie_list')" >
					<view class="m_txt">{{$t('pages.watched')}}</view>
					<view class="iconfont more">&#xe70f;</view>
				</view>
				
				<view class="m_con">
					<block v-for="(item,index) in history_list" :key="index">

						<!-- #ifdef APP -->
						<view class="movie" @click="$r('/pages/popular/shortDetail?id='+item.id)" >
						<!-- #endif -->
						<!-- #ifdef H5 -->
						<view class="movie" @click="$r('/pages/popular/shortDetail_h5?id='+item.id)" >
						<!-- #endif -->
							<image class="img" :src="realUrl(item.logo)"></image>
							<view class="txt">{{show_pt(item)}}</view>
						</view>
					</block>
					
				
						<view style="width:100%;margin-top: 5vw;padding: 1vw 0;" v-if="history_list.length==0">
							<u-empty mode="data" iconSize="120" :text="$t('nodata')" ></u-empty>
						</view>
				
				</view>
			</view>
			
			<view class="movie_item">
				<view class="m_tit" @click="$r('/pages/my/followerList')" >
					<view class="m_txt">{{$t('pages.followers')}}</view>
					<view class="iconfont more">&#xe70f;</view>
				</view>
				<view class="m_con">
					<block v-for="(item,index) in flow_list">

						<!-- #ifdef APP -->
						<view class="movie" @click="$r('/pages/popular/shortDetail?id='+item.id)" >
						<!-- #endif -->
						<!-- #ifdef H5 -->
						<view class="movie" @click="$r('/pages/popular/shortDetail_h5?id='+item.id)" >
						<!-- #endif -->

							<image class="img" :src="realUrl(item.logo)"></image>
							<view class="txt">{{show_pt(item)}}</view>
						</view>
					</block>
					
					<view style="width:100%;margin-top: 5vw;padding: 1vw 0;" v-if="flow_list.length==0">
						<u-empty mode="data" iconSize="120" :text="$t('nodata')" ></u-empty>
					</view>
					
					
				</view>
			</view>
		</view>
		<view class="bg_item"></view>
	</view>
</template>

<script>
	import { mapState} from 'vuex';
	import lang_mix from '@/lib/mixin/lang_mixin.js';
	export default {
		mixins:[lang_mix],
		data() {
			return {
				score : '0',
				bag_num : 0,
				stat_num : 0,
				data_package: '1',  //0未购买，其他状态下提示流量包可获得的对应钻石说明。
				service: '1',       //0未开通服务商。
				history_list:[],      //最近观看，对多放6个，更多到列表查看
				flow_list:[]     //我的追剧，对多放6个，更多到列表查看
			};
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		onLoad() {
			// this.initData();
		},
		onShow(){
			this.initData();
		},
		methods:{
			 is_json(str) {  
			  try {  
			    // 尝试将字符串解析为JSON对象  
			    const obj = JSON.parse(str);  
			    // 如果解析后的对象不是null，并且类型是对象或数组，则认为是有效的JSON  
			    // 注意：这里仅作为示例，根据你的具体需求，你可能不需要检查类型  
			    return obj && typeof obj === "object" && !Array.isArray(obj) || Array.isArray(obj);  
			  } catch (e) {  
			    // 如果解析过程中抛出错误，则认为不是有效的JSON  
			    return false;  
			  }  
			},
			initData(){
				let url = this.site_url + 'api/index/chase_init';
				this.areq(url).then(res=>{
					if(res.code == 1){  	
						this.flow_list = res.data.flow_list;
						this.history_list = res.data.historys;
						this.score = res.data.score;
						this.bag_num = res.data.bag_num;
						this.stat_num = res.data.stat_num;
					}
				});				
			},
			
			
		}
		
	}
</script>

<style lang="scss">
.head {
	width: 100%;
	position: fixed;
	z-index: 98;
	top: 0;
	padding: calc(var(--status-bar-height) + 16vw) 4% 5vw;
	background: $main_color2;
	overflow: hidden;
	.logo_img {
		position: absolute;
		top: 0;
		right: 0;
		width: 45vw;
		z-index: 10;
	}
	.h_con {
		width: 100%;
		display: flex;
		align-items: center;
		position: relative;
		.h_msg {
			flex: 1;
			padding: 0 3vw;
			.txt1 {
				font-size: 3.6vw;
				font-weight: bold;
				color: $main_color_s2;
			}
			.txt2 {
				font-size: 8.5vw;
				font-weight: bold;
				color: $main_color_s2;
			}
		}
		.h_tip{
			
		}
	}
}
.bg_item {
	@include bg_item(90vw);
}
.main{
	width: 100%;
	position: relative;
	z-index: 2;
	padding: calc(var(--status-bar-height) + 37vw) 4% 0;
	.tip_item{
		width: 100%;
		.tip{
			width: 100%;
			padding: 3vw 4vw 6vw;
			background: $main_color_s;
			color: #fff;
			font-size: 3vw;
			border-radius: 3vw 3vw 0 0;
			position: relative;
			z-index: 1;
		}
		.t_card{
			width: 100%;
			padding: 4vw;
			margin-top: -4vw;
			background: $main_color2_s;
			color: #333;
			font-size: 3vw;
			border-radius: 3vw;
			position: relative;
			z-index: 2;
			.t_c_t{
				width: 100%;
				font-size: 4vw;
				font-weight: bold;
				color: $main_color5;
				.num{
					font-size: 5vw;
					margin-right: 3vw;
				}
			}
			.remark{
				color: $main_color_s2;
				width: 100%;
				padding-top: 2vw;
				font-size: 3.5vw;
				.r_txt{
					padding-right: 3vw;
				}
			}
		}
	}
	.diamond_item{
		@include card_style();
		position: relative;
		margin-top: 4vw;
		overflow: hidden;
		height: 16vw;
		display: flex;
		align-items: center;
		.l_bg{
			position: absolute;
			width: 100%;
			height: 16vw;
			z-index: 1;
			top: 0;
			left: 0;
		}
		.l_con{
			position: relative;
			z-index: 2;
			color: $main_color_s2;
			font-weight: bold;
			font-size: 4vw;
		}
	}
	.movie_item{
		margin-top: 4vw;
		@include card_style();
		.m_tit{
			width: 100%;
			display: flex;
			align-items: center;
			.m_txt{
				flex: 1;
				font-size: 4vw;
				font-weight: bold;
				color: $main_color5;
			}
			.more{
				font-size: 3.4vw;
				color: #999;
				font-weight: bold;
			}
		}
		.m_con{
			width: 100%;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			.movie:not(:nth-child(3n+1)){
				margin-left: 2%;
			}
			.movie{
				width: 32%;
				margin-top: 3.2vw;
				position: relative;
				.img{
					width: 100%;
					height: 35vw;
					border-radius: 2vw;
				}
				.txt{
					width: 100%;
					padding-top: 0.5vw;
					font-size: 3.7vw;
					font-weight: bold;
					color: $main_color5;
					@include text_over_style(1);
				}
			}
		}
	}
}
</style>
